第十六天：物件與陣列的結合

物件與陣列的結合使用是 JavaScript 中一個非常常見且強大的結構，能夠幫助我們更有效地處理和管理大量資料。了解如何將物件和陣列結合使用，可以更靈活地組織資料，並提高程式的可讀性與效率。

1. 陣列中的物件

陣列中的每一個元素都可以是一個物件。這種結構非常適合儲存多個擁有相同屬性（但屬性值不同）的資料。舉個例子，假設你有一個包含多個使用者資料的陣列，每個使用者是一個物件。

範例：
let users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 35 }
];

console.log(users[0].name); // 輸出 "Alice"
console.log(users[1].age); // 輸出 30

在這個例子中，users 陣列裡的每個元素都是一個物件，這些物件包含 name 和 age 屬性。通過索引，我們可以輕鬆地訪問這些物件的屬性。

2. 物件中的陣列

物件的屬性也可以是一個陣列。這在需要為某一個屬性儲存多個值時非常有用。例如，你可以將一個人的喜好存成一個陣列，放在這個人的物件中。

範例：

let person = {
name: "David",
hobbies: ["reading", "gaming", "hiking"]
};

console.log(person.name); // 輸出 "David"
console.log(person.hobbies[1]); // 輸出 "gaming"

在這個例子中，person 物件的 hobbies 屬性是一個陣列，存放著這個人的興趣愛好。

3. 結合陣列與物件處理複雜資料

當你需要處理更複雜的資料時，物件與陣列的結合將變得非常有用。比如，當你在開發一個商店系統，需要儲存每個商品的詳細資訊（名稱、價格、分類等），並且還要記錄每個顧客的購物車商品時，這樣的結構非常實用。

範例：
let shop = {
products: [
{ id: 1, name: "Laptop", price: 1000 },
{ id: 2, name: "Phone", price: 500 }
],
cart: [
{ productId: 1, quantity: 2 },
{ productId: 2, quantity: 1 }
]
};

// 計算購物車總價
let total = 0;
shop.cart.forEach(item => {
let product = shop.products.find(p => p.id === item.productId);
total += product.price * item.quantity;
});
console.log("Total price: $" + total); // 輸出 "Total price: $2500"

這個例子展示了如何將物件與陣列結合使用來處理一個模擬的購物車系統。產品的資訊存放在 products 陣列中，而購物車中的每一個商品被記錄在 cart 陣列裡，最終根據 productId 計算總價。

4. 操作陣列中的物件

JavaScript 提供了很多操作陣列的方法，像是 map、filter、reduce 等等，這些方法與物件結合時，會讓你更容易操作和管理資料。

範例（過濾出年齡超過 30 的使用者）：
let users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 35 }
];

let olderUsers = users.filter(user => user.age > 30);
console.log(olderUsers); // 輸出 [{ name: "Charlie", age: 35 }]

範例（提取使用者的名稱）：
let userNames = users.map(user => user.name);
console.log(userNames); // 輸出 ["Alice", "Bob", "Charlie"]

這些方法可以很方便地操作陣列中的物件，提取或處理所需要的資訊。